<!-- 回归实验一数据集 -->
<template>
    <div id="point" class="pie-wrap"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
    name: "Exp1DataSet",
    data() {
        return {
            chart: null,
            blobs: [],
            options: {},
        };
    },

    mounted() {
        this.getData();
        this.$nextTick(() => {
            this.drawPieChart();
        });
    },

    methods: {
        async getData() {
            let { data } = await this.$http.get("/four/regression/dataset");
            console.log(data);

            // this.blobs = data.blobs;
            // this.moons = data.moons;
            // for (let i = 0; i < this.moons.length; i++) {
            //     const element = this.moons[i];
            //     this.blobs.push(element);
            // }
            for (let i = 0; i < data.x.length; i++) {
                this.blobs.push([data.x[i], data.y[i]]);
            }
            this.chartPie.setOption(this.option);
        },

        drawPieChart() {
            let mytextStyle = {
                color: "#333",
                fontSize: 18,
            };
            let mylabel = {
                show: true,
                position: "right",
                offset: [30, 40],
                formatter: "{b} : {c} ({d}%)",
                textStyle: mytextStyle,
            };

            this.chartPie = echarts.init(document.getElementById("point"));

            this.option = {
                xAxis: {},
                yAxis: {},
                series: [
                    {
                        symbolSize: 20,
                        data: this.blobs,
                        type: "scatter",
                    },
                ],
            };
            this.chartPie.setOption(this.option);
        },
    },
};
</script>

<style  scoped>
.pie-wrap {
    width: 100%;
    height: 100%;
}
</style>
